<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>值班列表</title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/list.css" />
	</head>
	<body  class="p10">
		<div class="container p15">
			<div class="btn-container"><a href="javascript:;" id="addBtn" class="layui-btn layui-btn-sm">添加</a></div>
			<table id="list" lay-filter="list"></table>
		</div>
		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script src="../../js/common.js"></script>
		<script>
			var data = [
						{id:'1',name:'网络组三班倒',startDate:'8:00',endDate:'8:00',dutyCycle:'3天',dutyDept:'网络组'},
						{id:'2',name:'网络组白班',startDate:'8:30',endDate:'6:00',dutyCycle:'5天',dutyDept:'网络组'}
					];
			layui.use(['table'],function(){
				var table = layui.table;
				//第一个实例
				  table.render({
					elem: '#list'
					,height: '450'
					,url: '' //数据接口
					,page: true //开启分页
					,cols: [[ //表头
					  {field: 'xh', title: '序号', width:80,align:'center'
					  ,templet:function(d){
						  return d.LAY_INDEX;
					  }}
					  ,{field: 'name', title: '计划名称',align:'center'}
					  ,{field: 'startDate', title: '开始时间',align:'center', width:120}
					  ,{field: 'endDate', title: '结束时间',align:'center', width:120}
					  ,{field: 'dutyCycle', title: '排班周期',align:'center', width:120}
					  ,{field: 'dutyDept', title: '值班部门',align:'center', width:120}
					  ,{field: 'dutyCalender', title: '排班日历',align:'center', width:120,
						templet:function(d){
							return `<a href="#" onclick="showDuty(${d.id})"><i class="layui-icon layui-icon-tabs"></i></a>`
						}
					  }
					  ,{field: 'opt', title: '操作', width: 160,align:'center'
					  ,templet:function(d){
						  return `<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs"><i class="layui-icon layui-icon-edit"></i>编辑</a>
						  &nbsp;<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>`
					  }}
					]]
					,data: data
				  });
			})
			$(function(){
				$("#addBtn").click(function(){
					top.tabAdd('添加值班计划','duty_add','pages/duty/duty_add.html',true,true);
					
				})
			})
			function showDuty(id){
				openLayer('duty_calender.html','值班日历','800px','600px');
			}
		</script>
	</body>
</html>
